import React from 'react';
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less';
import PropTypes from 'prop-types';
import { Button,List,Checkbox,Flex,WhiteSpace } from 'antd-mobile';

import {getUrlParams} from 'UTIL/commonUtil';
const CheckboxItem = Checkbox.CheckboxItem;

export default class MyLoan extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);
    this.state={ 
      list:[
        {key:'0',position:'山东省济南市',address:'济阳县12222209',area:120.0000,money:'249920000.00'},
      ],
      checkedId:'0',
    }
  }

  componentDidMount(){
  	
    let urlParams = JSON.parse(localStorage.getItem('LoanMessage'));
    let newlist = JSON.parse(localStorage.getItem('loanList'))|| [{key:'0',position:'山东省济南市',address:'济阳县12222209',area:120.0000,money:'249920000.00'}];

    if(urlParams){ 
      let n = newlist.length;
      if(n<2){
      	urlParams = Object.assign(urlParams,{key:n});
	      newlist.push(urlParams);
	      localStorage.removeItem('LoanMessage')
      }
    }
    this.setState({
      list:newlist,
      checkedId:'0',
    })
  }
  onChange = (data)=>{ 
    this.setState({checkedId:data.key});
  }
  setData = ()=>{ 
    let data = this.state.list;

    localStorage.setItem('loanList',JSON.stringify(data));
    this.context.router.push({
			pathname: '/houseLoanAdd'
    })
  }

  render(){
  	let {list} =this.state;
  	let _this = this;
    return(
      <div className='my_loan_body'>
      	<CommonHeader 
					name='房抵贷申请'					
					leftContentTitle="@back" 
					leftContent='返回'				
				/>
				<div style={{height:'.9rem'}}></div>
				
        <div className='my_loan_body_title'>请选择您的抵押房产</div>
        
        
          {list.map(i => ( 
            <List className='my_loan_body_list'>
              <CheckboxItem checked={this.state.checkedId==i.key?true:false} key={i.key} onChange={() => this.onChange(i)}>
                <div className='my_loan_body_list_font'>
                    {i.position}{i.address}(房屋面积:{i.area}m²)
                </div>
                <div className='my_loan_body_list_font'>预计房屋最大可贷金额:<span>{i.money}</span></div>
              </CheckboxItem>
            </List>
            
          ))}
        <div justify='center'>
            <Button inline type='ghost' onClick={this.setData} className='my_loan_body_botton' style={{fontSize:'.3rem'}}>  ＋   添加抵押房产</Button>
          
        </div>
        
        

        

        {/*<div className='my_loan_body_next' onClick={*/}
        	{/*()=>{*/}

        		{/*_this.context.router.push({*/}
							{/*pathname: '/LoansApply'*/}
				    {/*})*/}
        	{/*}*/}
        {/*}>*/}
            {/*<Button inline type='primary'  className='my_loan_body_botton_next'*/}
            	{/*style={{*/}
            		{/*fontSize:'.36rem'*/}
            	{/*}}*/}

            {/*>下一步</Button>*/}
        {/*</div>*/}
          <div className="btnGroup-one" style={{position: 'absolute', bottom: '30px'}}>
              <Button type="primary" className="btnGroup-one-btn"
                      onClick={()=>{
                          _this.context.router.push({
                              pathname: '/LoansApply'
                          })
                      }}>下一步</Button>
          </div>
      </div>
    )
  }
}
